<script lang="ts" setup>
import { ref, watch } from 'vue';

import {
  Col,
  Form,
  FormItem,
  Input,
  InputNumber,
  Row,
  Select,
  SelectOption,
  Switch,
  Textarea,
} from 'ant-design-vue';

// Props
const props = defineProps<{
  capability?: any;
}>();

// Emits
const emit = defineEmits<{
  update: [data: any];
}>();

// 响应式数据
const formData = ref({
  name: '',
  id: '',
  description: '',
  type: 'business',
  enabled: true,
  priority: 50,
  version: '1.0.0',
  icon: 'ant-design:setting-outlined',
  tags: [],
});

// 监听props变化
watch(
  () => props.capability,
  (newCapability) => {
    if (newCapability) {
      formData.value = {
        name: newCapability.name || '',
        id: newCapability.id || '',
        description: newCapability.description || '',
        type: newCapability.type || 'business',
        enabled: newCapability.enabled !== false,
        priority: newCapability.priority || 50,
        version: newCapability.version || '1.0.0',
        icon: newCapability.icon || 'ant-design:setting-outlined',
        tags: newCapability.tags || [],
      };
    }
  },
  { immediate: true },
);

// 方法
const handleFormChange = () => {
  emit('update', formData.value);
};
</script>

<template>
  <div class="capability-basic-info">
    <Form layout="vertical" :model="formData">
      <Row :gutter="24">
        <Col :span="12">
          <FormItem label="能力名称" name="name">
            <Input
              v-model:value="formData.name"
              placeholder="请输入能力名称"
              @change="handleFormChange"
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="能力标识" name="id">
            <Input
              v-model:value="formData.id"
              placeholder="请输入能力标识"
              @change="handleFormChange"
            />
          </FormItem>
        </Col>
      </Row>

      <FormItem label="能力描述" name="description">
        <Textarea
          v-model:value="formData.description"
          placeholder="请输入能力描述"
          :rows="3"
          @change="handleFormChange"
        />
      </FormItem>

      <Row :gutter="24">
        <Col :span="8">
          <FormItem label="能力类型" name="type">
            <Select
              v-model:value="formData.type"
              placeholder="请选择能力类型"
              @change="handleFormChange"
            >
              <SelectOption value="business">业务能力</SelectOption>
              <SelectOption value="technical">技术能力</SelectOption>
              <SelectOption value="custom">自定义能力</SelectOption>
            </Select>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem label="启用状态" name="enabled">
            <Switch
              v-model:checked="formData.enabled"
              checked-children="启用"
              un-checked-children="禁用"
              @change="handleFormChange"
            />
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem label="优先级" name="priority">
            <InputNumber
              v-model:value="formData.priority"
              :min="1"
              :max="100"
              style="width: 100%"
              @change="handleFormChange"
            />
          </FormItem>
        </Col>
      </Row>

      <Row :gutter="24">
        <Col :span="12">
          <FormItem label="版本号" name="version">
            <Input
              v-model:value="formData.version"
              placeholder="请输入版本号"
              @change="handleFormChange"
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="图标" name="icon">
            <Input
              v-model:value="formData.icon"
              placeholder="请输入图标名称"
              @change="handleFormChange"
            />
          </FormItem>
        </Col>
      </Row>

      <FormItem label="标签" name="tags">
        <Select
          v-model:value="formData.tags"
          mode="tags"
          placeholder="请输入标签"
          @change="handleFormChange"
        />
      </FormItem>
    </Form>
  </div>
</template>

<style lang="less" scoped>
.capability-basic-info {
  padding: 24px;
}
</style>
